<template>
  <div class="dragSort">
    <div class="currentEntry">
      当前入口<span class="canDarg">(可拖拽排序)</span>
    </div>
    <div >
      <draggable class="sortContent"  v-model="newApplyList" @end="dragged">
          <div v-for="(item, index) in newApplyList" :key="index">
            <sort-btn
              :apply="item"
              @deleteApply="deleteApply"
              class="curSort"
            ></sort-btn>
          </div>
      </draggable>
    </div>
    <div class="currentEntry">
      更多入口
    </div>
    <div class="sortContent">
      <div v-for="(item, index) in newMoreList" :key="index">
        <sort-btn :apply="item" @addApply="addApply"></sort-btn>
      </div>
    </div>
  </div>
</template>
<script>
import sortBtn from "@/components/singlePage/sortBtn.vue";
import draggable from "vuedraggable";
export default {
  name: "dragSort",
  props: {
    applyList: {
      type: Array,
      default: ()=>[]
    },
    moreList: {
      type: Array,
      default: ()=>[]
    },
  },
  components: { sortBtn, draggable },
  data() {
    return {
      newApplyList: this.applyList,
      newMoreList: this.moreList
    };
  },
  methods: {
    deleteApply(item) {
      item.show = false;
      this.newMoreList.push(item);
      this.newApplyList = this.newApplyList.filter(i=> {
        return i.id !== item.id
      })
      this.$emit('deleteApply', this.newApplyList)
    },
    addApply(item) {
      item.show = true;
      this.newApplyList.push(item);
      this.newMoreList = this.newMoreList.filter(i=> {
        return i.id !== item.id
      })
      this.$emit('addApply', this.newApplyList)
    },
    dragged(){
      this.$emit("dragged", this.newApplyList)
    }
  }
};
</script>
<style lang="less" scoped>
.dragSort {
  .currentEntry {
    font-size: 14px;
    color: #333;
    .canDarg {
      color: #999;
      font-size: 12px;
      padding-left: 10px;
    }
  }
  .sortContent {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .curSort:hover {
      box-shadow: 1px 1px 8px #ccc;
      border: none;
    }
  }
}
</style>